Tables  are  for  Rows  and  Columns 


• When  you  have  something  that  looks  like  a spreadsheet  - - with  rows 
and  columns  and  optionally  headers  and  footers  - use  a table 

• It  is  the  *right*  thing  to  use  a table  when  presenting  tabular  data 


Name 

Contact  (Home) 

Contact  (Work) 

Location 

Jane  Bradley 

02380  123123 

02380  577566 

Southampton 

Fred  Bradley 

01273  177166 

01273  946376 

Brighton 

Lionel  Rundcl 

01793  641207 

01793  626696 

Swindon 

Tables  are  *not*  for  Layout 

• Better  accessibility  - when  tables  are  used  for  layout  the  HTML  ends 
up  cluttered  with  extra  tags  which  are  there  for  layout  only 

• Because  the  browser  must  lay  out  table  cells  based  on  their  contents 
and  the  contents  of  the  other  cells  it  forces  the  browser  to  wait  until 
the  whole  page  is  downloaded  (including  embedded  images)  before 
page  elements  can  be  placed  in  their  final  on-screen  position. 

• When  tables  were  used  for  grpahic  layout  - table  tags  would  be  nested 
inside  table  tags  simply  to  add  a border  - making  the  process  even 
slower 


<table> 

<tr> 

<th>Name</th> 
<th>Contact  (Hotne)</th> 
<th>Contact  (Work)</th> 
<th>Locotion</th> 

</tr> 

<tr> 

<td>Jane  Bradley</td> 
<td>02380  12B123</td> 
<td>C2380  577566</td> 
<td>Southanpton</td> 
</t  r> 

<tr> 

<td>Fred  Bradley</td> 
<td>01273  177166</td> 
<td>01273  946376</td> 
<td>Brighton</td> 

</tr> 

<tr> 

<td>Lionel  Rundel</td> 
<td>01793  641207</td> 
<td>C1793  626696</td> 
<td>Swi ndon</td> 

</tr> 

</table> 


Table 


Anatomy  of  a 
Simple  Table 


Table  Header  Cells 


Table  Row 


Table  Data  Cells 


Tables  *need*  Styling 

• The  default  look  and  feel  of  tables  is  so  poor  the  you  might  be 
tempted  to  start  adding  styling  in-line 

• Avoid  that  temptation  - use  CSS  even  if  in  the  <head>  area 

Name  Contact  (Home)  Contact  (Work)  Location 

Jane  Bradley  02380  123123  02380  577566  Southampton 

Fred  Bradley  01273  177166  01273  946376  Brighton 

Lionel  Rundcl  01793  641207  01793  626696  Swindon 


<style  type- 

' text/css  "> 

table  { 

border-collapse:  collapse; 

border:  lpx 

solid  black; 

} 

th  { 

text-align: 

left; 

background: 

* 

$ 

color:  whit< 

V 

> 

padding: 

• 

> 

> 

td  { 

border:  lpx 

solid  jlack; 

padding: 

9 

1 

> 

</style> 

</head> 

<body> 

<table> 

<tr> 

<th>Ncne</th> 

<th>Contact  (Home)</th> 

<th>Contact  (VHork)</th> 

<th>Location</th> 

</tr> 

Basic  Styling 


• Looks  *like*  a table  of  rows  and  columns 


Name 

Contact  (Home)  Contact  (Work)  Location 

Jane  Bradley 

02380  123123 

02380  577566 

Southampton 

Fred  Bradley 

01273  177166 

01273  946376 

Brighton 

Lionel  Rundcl 

01793  641207 

01793  626696 

Swindon 

Different  Tables 
Different  Styles 


table. rates  { 

/*  declarations  for  rates  tables  */ 

} 

table. schedule  { 

/*  declarations  for  schedule  tables  */ 

} 

table. events  { 

/*  declarations  for  events  tables  */  <table  class="rates"> 

} 


Again  mark  tables  semantically  - and  then  style  in  CSS. 


Accessible  Tables 


Use  headers  <th>  for  header 
material 

Use  <caption>  for  on-screen 
summary 

Use  summary  attribute  of  table 
tag  for  off-screen  summary 


<table 

summary="Area  representatives,  and 
their  telephone  numbers"> 
<caption> 

Contact  details 
</caption> 

<tr> 

<th>Name</th> 

<th>Contact  (Home)</th> 
<th>Contact  (Work)</th> 
<th>Location</th> 

</tr> 


Advanced  Styling 


• Colors  and  background 
images  can  make  tables 
very  attractive 

• It  all  belongs  in  the 
styling  - not  inline 


Diving  club  for  the  south-west  UK  - let's  make  a splash! 


Home 
About  Us 
Club  Events 
Contact  Us 
Image  Gallery 


Forthcoming  Club  Events 

Bubble  Under  members  love  meeting  up  for  dive  trips  around  the  country.  Below  are 
all  the  dive  trips  that  we  currently  have  planned.  For  more  information  about  any  of 
them,  please  get  in  contact  with  that  event's  organizer. 


Club  events/dive  trips  for  the  next  six  months 


1 Date  Event  Description 

Approximate  Cost 

Contact  ] 

12  July 

Committee  meeting,  deciding  on 
next  year's  trips 

N/A 

Bob 

Dobalina 

19  July 

7-day  tnp  to  Hurghada  (package 
deal)  - limited  spaces 

£260  pp  (all  inclusive), 
departing  Luton 

Bob 

Dobalina 

5 

August 

Ocean  & Sports  Diver  Theory 
Course 

Call  for  details 

Jeff 

Edgely 

12 

August 

Murder  Mystery  Weekend, 
Cotswolds  (no  diving!) 

£65  pp  (accommodation 
included) 

Jill  Smith 

Merging  Table 
Cells 


• colspan  and  rowspan 
indicate  that  a 
particular  <th>  or  <td> 
element  is  more  than 
one  row  or  column 

• colspan  is  more 
commonly  used 


Date 

Event  Details 

Contact 

Event  Description 

Approximate  Cost 

12  July 

Committee  meeting,  deciding 
on  next  year’s  trips 

N/A 

Bob  Dobalina 

19  July 

7-day  trip  to  Hurghada 
(package  deal)  - limited 
spaces 

£260  pp  (all  inclus- 
ive), departing  Luton 

Bob  Dobalina 

5 August 

Ocean  & Sports  Diver  Theory 
Course 

Call  for  details 

Jeff  Edgely 

12  August 

Murder  Mystery  Weekend, 
Cotswolds  (no  diving!) 

£65  pp  (accommoda- 
tion included) 

Jill  Smith 

<table> 

<tr> 

<th  rowspan="2">Date</th> 

<th  colspan="2">Event  Details</th> 
<th  rowspan="2">Contact</th> 
</tr> 

<tr> 

<th>Event  Description</th> 
<th>Approximate  Cost</th> 

</tr> 


Advanced  scope="row 

Headers 


scope="col" 


Departure  Tiine 

Platform 

Buffet  Coach 

Southampton 

13:03 

112 

Yes 

>1 

Edinburgh 

14:47 

4 

Yes 

Newcastle 

15:55 

7 

No 

s 

• When  making  a two 
dimensional  table  you 
can  put  in  row 
headers. 


<table> 

<caption>Train  times  and  departures</caption> 
<tr> 

<td></td>  <!—  top-right  corner  — > 

<th  scope="col">Departure Time</th> 

<th  scope="col">Platform</th> 

<th  scope="col">Buffet  Coach</th> 

</tr> 

<tr> 

<th  scope="row">Southampton</th> 

<td>  1 3:03</td> 

<td>  1 2</td> 

<td>Yes</td> 


Summary 


• Tables  have  gotten  a bad  name  because  they  were  abused  for 
years  to  hack  layout 

• But  tables  are  very  well-suited  for  displaying  tabular  data 

• The  key  is  to  remember  to  use  tables  to  mark  tabular  data  and 
heading  information  semantically  - not  as  a layout  mechanism 

• Think  about  accessibility  when  building  a table 


